﻿/// <reference path="../../config.ts" />
import ko = require("knockout")
import Track = require("Track");
import Editor = require("Editor");
import Clip = require("Clip");

class TrackVisual {
    public constructor(public params: {track: Track, editor: Editor}) {
        this.track = params.track;
        this.editor = params.editor;
        this.clipPairs = params.track.clips;
        this.zoom = params.editor.zoom;
        this.widthInPx = params.editor.tracksWidth;

        this.draggedClipStyle = ko.pureComputed(() => {
            var style = {
                left: this.editor.dragTargetTime() * this.editor.zoom() + 'px',
                width: (this.editor.dragClip() ? this.editor.dragClip().duration() : 0) * this.editor.zoom() + 'px'
            };
            return style;
        });

        this.draggedClipClass = ko.pureComputed(() => {
            var classes = {
                forbidden: !this.editor.dragCanDrop(),
                hidden: this.editor.dragTargetTrack() != this.track || this.editor.dragClip() == null
            };
            return classes;
        });
    }


    heightInPx: KnockoutComputed<string> = ko.pureComputed(()=>this.track.height()+"px");

    clipPairs: KnockoutObservableArray<{ clip: Clip; offset: number }>;
    track: Track;
    editor: Editor;

    zoom: KnockoutObservable<number>;

    gotFocus = ko.pureComputed(() => this.editor.focusTrack() == this.track);

    cssClasses = ko.pureComputed(() => (this.gotFocus() ? 'focused ' : ' ') + this.track.themeClass());

    onTap = (event, element) => {
        this.editor.focusTrack(this.track);
    }

    onDragOver = (event) => {
        event.targetTrack = this.track;
    }

    widthInPx: KnockoutComputed<string>;
    draggedClipStyle: KnockoutComputed<{ left: string, width: string }>;
    draggedClipClass: KnockoutComputed<{ hidden: boolean }>;
}

export = TrackVisual